<!--底部菜单栏-->
<template>
  <div class="tabbar">
    <Play></Play>
    <van-tabbar
      v-model="active"
      active-color="#e3617d"
      inactive-color="#c3c3c5"
      :placeholder="true"
    >
      <van-tabbar-item>
        <span>发现</span>
        <template #icon="props">
          <i :class="['iconfont', 'icon-yinle', props.active ? 'act' : '']"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>播客</span>
        <template #icon="props">
          <i :class="['iconfont', 'icon-vynil', props.active ? 'act' : '']"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <i
            :class="['iconfont', 'icon-yinyue', props.active ? 'act' : '']"
          ></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>k歌</span>
        <template #icon="props">
          <i
            :class="['iconfont', 'icon-huatong', props.active ? 'act' : '']"
          ></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>云村</span>
        <template #icon="props">
          <i :class="['iconfont', 'icon-wode', props.active ? 'act' : '']"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Play from "../play/index";
export default {
  components: {
    Play,
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tabbar {
  height: 60px;
}
.van-tabbar__placeholder {
  height: 110px !important;
}
.act {
  background: linear-gradient(90deg, #fd6155, #ff1f0f);
  color: #fff;
}
/deep/.van-tabbar-item__icon {
  height: 30px;
  i {
    border-radius: 50%;
    padding: 2vw;
    font-size: 18px;
  }
}
</style>